<template>
      <div id="news">
            <div class="imgbox">
                  <img src="../assets/img/news.png" alt="">
            </div>
            <div class="titlebox">
                  <div class="title">
                        <i class="el-icon-arrow-left"></i> 
                        <span>盈友科技</span>
                  </div>
            </div>
            <div class="newsbox">
                  <div class="newstitle">
                        {{ newsData.title }}
                  </div>
                  <div class="content">
                        <div class="inner" v-html="newsData.content"></div>
                  </div>
                  <div class="btns">
                        <div class="pre">
                              <el-link type="primary" @click="preNews(pre)">上一篇 : {{ pre.title ? pre.title : "没有了" }}</el-link>
                        </div>
                        <div class="next">
                              <el-link type="success" @click="preNews(next)">下一篇 : {{ next.title ? next.title : "没有了" }}</el-link>
                        </div>
                  </div>
            </div>
      </div>
</template>

<script>
      export default {
            computed: {
                  id() {
                        return this.$route.params.newsid 
                  }
            },
            data() {
                  return {
                        newsData: {},
                        pre: "",
                        next: "",
                  }
            },
            watch: {
                  id() {
                        this.getNews()
                  }
            },
            mounted () {
                  this.getNews();
            },
            methods: {
                  // 获取单个文章
                  async getNews() {
                       // console.log(this.$key, this.id);
                        let res = await this.$axios.post("/index/index/messagesingle", {
                              key: this.$key,
                              id: this.id
                        })
                        //console.log(res);
                        this.newsData = res.data.data.dang
                        this.newsData.content = this.txtmat(this.newsData.content)
                        this.pre = res.data.data.shang
                        this.next = res.data.data.xia
                  },
                  // 富文本格式化
                  txtmat( val ) {
                        let reg = /&lt;/g
                        let reg2 = /&gt;/g
                        return val.replace(reg, "<").replace(reg2,">")
                  },
                  // 上下篇
                  preNews( ctx ) {
                        this.$router.push(`/newsshow/${ctx.id}`)
                  },
                  
            },
      }
</script>

<style lang="scss" scoped>
#news {
      width: 100%;
      .imgbox {
            width: 100%;
            img {
                  width: 100%;
                  display: block;
            }
      }
      .titlebox {
            width: 1080px;
            display: flex;
            align-items: center;
            font-size: 18px;
            line-height: 30px;
            color: #2B40CC;
            margin: 30px auto;
      }
      .newsbox {
            padding: 20px;
            width: 1080px;
            margin: 20px auto;
            .newstitle {
                  font-size: 30px;
                  width: 100%;
                  text-align: center;
                  margin: 30px 0;
            }
            .content {
                  width: 100%;
            }
            .btns {
                  width: 100%;
                  display: flex;
                  align-items: center;
                  justify-content: space-between;
                  margin: 50px 0;
            }
      }
}
</style>